<template>
  <page-header-wrapper :title="false">
    <a-card title="所有通话">
      <a-tabs @change="onTabs">
        <div slot="tabBarExtraContent">
          所有通话
          <a-divider type="vertical" />
          <span class="font16">通时有10秒左右的延时</span>
          <a-divider type="vertical" />
          <span class="font16">今日总通时 <a>{{(callData.call_num/60).toFixed(2)}}</a>分钟</span>
          <a-divider type="vertical" />
          <span class="font16">平均每人通时 <a>{{(callData.call_num_aver/60).toFixed(2)}}</a>分钟</span>
        </div>
        <a-tab-pane key="1" tab="APP拨号"></a-tab-pane>
        <a-tab-pane key="2" tab="软件拨号"></a-tab-pane>
      </a-tabs>
      <sub-nan-fang v-if="currentTab == 1"></sub-nan-fang>
      <kao-la v-if="currentTab == 2"></kao-la>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import SubNanFang from './components/SubNanFang'
  import KaoLa from './components/KaoLa'
  import { getData } from '@/api/calls'
  export default {
    components: {
      SubNanFang,
      KaoLa
    },
    name: 'AllSubCalls',
    data () {
      return {
        currentTab: '1',
        callData: {}
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        getData().then(res => {
          if (res.status === 0) {
            this.callData = res.result
          }
        })
      },
      onTabs (key) {
        this.currentTab = key
      }
    }
  }
</script>

<style scoped>

</style>
